<template>
  <div class="login_container">
    <div class="login_box">
      <div class="login_title">
        <span>欢迎登录</span>
      </div>
      <a-form :form="form" @submit="handleSubmit">
        <a-form-item>
          <a-input size="large" v-decorator="['userName', { rules: [{ required: true, message: '用户名不能为空!' }] }]"
            placeholder="用户名" />
        </a-form-item>
        <a-form-item>
          <a-input-password size="large" v-decorator="['passWord', { rules: [{ required: true, message: '密码不能为空!' }] }]"
            placeholder="密码" />
        </a-form-item>
        <a-form-item>
          <a-button size="large" type="primary" html-type="submit">
            登录
          </a-button>
          <a-button size="large" type="primary" @click="showModal">
            注册
          </a-button>
        </a-form-item>
      </a-form>
    </div>

    <a-modal title="注册" :visible="visible" :confirm-loading="confirmLoading" @ok="registerSubmit" @cancel="handleCancel"
      ok-text="注册" cancel-text="取消">
      <a-form :form="formtwo" @submit="registerSubmit">
        <a-row>
          <a-col :span="2"></a-col>
          <a-col :span="20">
            <a-form-item label="用户名">
              <a-input size="large" v-decorator="['userName', { rules: [{ required: true, message: '用户名不能为空!' }] }]"
                placeholder="用户名" />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="2"></a-col>
          <a-col :span="20">
            <a-form-item label="密码" has-feedback>
              <a-input type="password" size="large"
                v-decorator="['passWord', { rules: [{ required: true, message: '密码不能为空!' },{validator:validateToNextPassword}] }]"
                placeholder="密码" />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="2"></a-col>
          <a-col :span="20">
            <a-form-item label="确认密码" has-feedback>
              <a-input type="password" size="large"
                v-decorator="['passWordAgain', { rules: [{ required: true, message: '确认密码不能为空!' },{validator:compareToFirstPassword}] }]"
                placeholder="确认密码" @blur="handleConfirmBlur" />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="2"></a-col>
          <a-col :span="20">
            <a-form-item label="邮箱">
              <a-input size="large"
                v-decorator="['mailAddress', { rules: [{ required: true, message: '邮箱不能为空!' },{type:'email',message:'输入的邮箱不合法'}] }]"
                placeholder="邮箱" />
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </a-modal>
  </div>

</template>

<script>
export default {
  data() {
    return {
      form: this.$form.createForm(this),
      formtwo: this.$form.createForm(this),
      visible: false,
      confirmLoading: false,
    }
  },
  beforeCreate() {

  },
  methods: {
    // 登录 提交表单
    handleSubmit(e) {
      e.preventDefault();
      this.form.validateFields(async (err, values) => {
        if (!err) {
          const { username: userName, password: passWord } = values;
          const { data } = await this.$http.post('http://mgr.iotddc.com/user/login', this.$qs.stringify(values))
          if (data.code === "400") {
            this.$message.error('用户名或密码输入错误!');
          } else {
            //   登录成功
            // console.log(data);
            this.$message.success('登录成功!')
            //   保存token
            window.sessionStorage.setItem('token', data.token)
            //   跳转到后台页面
            this.$router.push('/home')

          }

        }
      });
    },
    // 注册按钮 弹出对话框
    showModal() {
      this.formtwo.resetFields();

      this.visible = true;
    },
    // 对话框取消
    handleCancel(e) {
      this.visible = false;
      this.formtwo.resetFields();
    },
    // 对话框注册
    // handleOk(e) {
    //   this.registerSubmit()
    // },
    // 提交注册表单
    registerSubmit(e) {
      //   console.log(123);
      e.preventDefault();
      this.formtwo.validateFieldsAndScroll(async (err, values) => {
        if (!err) {
          console.log('Received values of form: ', values);
          //   表单验证成功 注册
          const { userName, passWord, mailAddress } = values;
          console.log(userName, passWord, mailAddress);
          const { data } = await this.$http.post('http://mgr.iotddc.com/user/register', this.$qs.stringify({
            "userName": userName,
            "passWord": passWord,
            "mailAddress": mailAddress
          }))
          if (data.code === "200") {
            this.$message.success('注册成功!');
          } else {
            this.$message.error('注册失败!')
          }
          this.visible = false;
          this.formtwo.resetFields();
        }
      });
    },
    // 输入后弹起 确认密码框
    handleConfirmBlur(e) {
      const value = e.target.value;
      this.confirmDirty = this.confirmDirty || !!value;

    },
    compareToFirstPassword(rule, value, callback) {
      const form = this.formtwo;
      if (value && value !== form.getFieldValue('passWord')) {
        callback('输入的两次密码不相同!');
      } else {
        callback();
      }
    },
    validateToNextPassword(rule, value, callback) {
      const form = this.formtwo;
      if (value && this.confirmDirty) {
        form.validateFields(['confirm'], { force: true });
      }
      callback();
    },

  }
}
</script>


<style scoped>
.login_container {
  position: relative;
  width: 100vw;
  height: 100vh;
  background: url("../images/loginBg.png") center center no-repeat;
  background-size: 100%;
}

.login_box {
  position: absolute;
  top: 35%;
  right: 19.5%;
  width: 20vw;
  height: 40vh;
}

.login_title {
  color: white;
  font-size: 2rem;
  text-align: center;
  margin-bottom: 2rem;
}

.ant-btn {
  width: 46%;
  margin: 0 2%;
}
</style>